<!-- components/account/ProfileSettings.vue -->
<template>
  <div class="profile-settings">
    <el-form :model="form" label-width="100px">
      <!-- 头像上传 -->
      <el-form-item label="头像">
        <div class="avatar-upload">
          <el-avatar :size="100" :src="form.avatar || ''">
            {{ form.name ? form.name.charAt(0) : 'T' }}
          </el-avatar>
          <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary" size="small">更换头像</el-button>
          </el-upload>
        </div>
      </el-form-item>

      <!-- 基本信息 -->
      <el-form-item label="昵称">
        <el-input
            v-model="form.nickname"
            :placeholder="form.nickname === '--' ? '暂无昵称' : '请输入昵称'"
            style="width: 300px;"
        />
      </el-form-item>

      <el-form-item label="姓名">
        <el-input
            v-model="form.name"
            :placeholder="form.name === '--' ? '暂无姓名' : '请输入真实姓名'"
            style="width: 300px;"
        />
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
          <el-radio label="unknown" v-if="form.gender === '--'">未知</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="证件号">
        <el-input
            v-model="form.idCard"
            :placeholder="form.idCard === '--' ? '暂无证件号' : '请输入身份证号码'"
            style="width: 300px;"
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存修改</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
      </el-form >
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props接口
interface Props {
  teacherInfo?: {
    name?: string
    avatar?: string | null
    phone?: string
    email?: string
    // 其他可能需要的字段
  }
}

// 接收父组件传递的属性
const props = withDefaults(defineProps<Props>(), {
  teacherInfo: () => ({})
})
interface ProfileForm {
  avatar: string
  nickname: string
  name: string
  gender: string
  idCard: string
}

const form = reactive<ProfileForm>({
  avatar: '--',
  nickname: '--',
  name: '--',
  gender: '--',
  idCard: '--'
})

// 初始化表单数据
const initFormData = () => {
  if (props.teacherInfo) {
    form.avatar = props.teacherInfo.avatar || '--'
    form.name = props.teacherInfo.name || '--'
    // 昵称可以使用姓名，或者从其他字段获取
    form.nickname = props.teacherInfo.name || '--'
  }
}

// 监听父组件数据变化
watch(() => props.teacherInfo, (newInfo) => {
  if (newInfo) {
    initFormData()
  }
}, { deep: true, immediate: true })

const beforeAvatarUpload = (file: File) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPGOrPNG) {
    ElMessage.error('头像只能是 JPG 或 PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }

  // 模拟上传成功
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    form.avatar = reader.result as string
    ElMessage.success('头像上传成功!')
  }

  return false // 阻止默认上传
}

const handleSave = () => {
  // 检查是否有未填写的字段
  const hasEmptyField = Object.values(form).some(value =>
      value === '--' || value === '' || value === null
  )

  if (hasEmptyField) {
    ElMessage.warning('请填写完整的个人信息')
    return
  }

  ElMessage.success('个人信息保存成功!')
  // 这里可以添加保存到后端的逻辑
}

const handleReset = () => {
  initFormData()
  ElMessage.info('已重置表单')
}

// 组件挂载时初始化数据
onMounted(() => {
  initFormData()
})
</script>

<style scoped>
.profile-settings {
  padding: 20px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-uploader {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

/* 为暂无数据的输入框添加特殊样式 */
:deep(.el-input__inner::placeholder) {
  color: #909399;
  font-style: italic;
}

/* 当字段为"--"时的特殊样式 */
:deep(.el-input__inner) {
  color: var(--el-text-color-regular);
}

:deep(.el-input__inner[value="--"]) {
  color: #909399;
}
</style>
